You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.7 KiB
49 lines
1.7 KiB
2 months ago
|
import React from "react";
|
||
|
|
import { getProductById } from "../../../lib/data";
|
||
|
|
|
||
|
|
export const revalidate = 300;
|
||
|
|
|
||
|
|
interface Props { params: { id: string } }
|
||
|
|
|
||
|
|
export function generateMetadata({ params }: Props) {
|
||
|
|
const data = getProductById(params.id);
|
||
|
|
return {
|
||
|
|
title: data ? `${data.product.name} - LOG` : `产品 - LOG`,
|
||
|
|
description: data?.product.description ?? "产品详情"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ProductPage({ params }: Props) {
|
||
|
|
const data = getProductById(params.id);
|
||
|
|
if (!data) {
|
||
|
|
return (
|
||
|
|
<div className="mx-auto max-w-screen-md px-4 py-12">
|
||
|
|
<h1 className="text-2xl font-semibold">产品未找到</h1>
|
||
|
|
<a className="mt-6 inline-block text-blue-600" href="/">返回首页</a>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const { product, floor } = data;
|
||
|
|
return (
|
||
|
|
<div className="mx-auto max-w-screen-md px-4 py-8">
|
||
|
|
<div className="text-sm text-gray-600 mb-4">
|
||
|
|
<a href="/">首页</a> / <a href={`/channel/${floor.id.replace(/^floor-/, '')}`}>{floor.title}</a> / <span>{product.name}</span>
|
||
|
|
</div>
|
||
|
|
<div className="grid md:grid-cols-2 gap-6">
|
||
|
|
<img src={product.image} alt={product.name} className="w-full object-cover rounded-lg aspect-square bg-white" />
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h1 className="text-2xl font-semibold">{product.name}</h1>
|
||
|
|
{product.description && <p className="text-gray-600">{product.description}</p>}
|
||
|
|
{product.price != null && <div className="text-rose-600 text-xl font-semibold">¥{product.price}</div>}
|
||
|
|
<div className="pt-4">
|
||
|
|
<button className="px-5 py-2.5 rounded bg-black text-white">加入购物车</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|